<template>
  <div style="padding: 10px">
    <div>
      <el-input
        type="text"
        autocomplete="off"
        v-model="list"
        :clearable="true"
        style="max-width: 500px"
        placeholder="商品名称 · 编码 · 条码"
        @keyup.enter="chadanpin()"
      >
        <template #append>
            <div>
 <el-button
            @click="chadanpin()"
            type="primary"
            icon="el-icon-search"
            plain
            :loading="isres"
            >查单品库存</el-button
          >
          <el-button
        style="margin-left: 20px"
        class="exportAllData"
        type="primary"
        :loading="downloadLoading"
        @click="zhengda"
        icon="el-icon-download"
        plain
        >导出</el-button
      >
            </div>
        </template>
         
      </el-input>
      
    </div>
    <!-- <input type="text" v-model="qishu"/><span class="seach" @click="chadd()" v-if="state==1">关闭订单</span>
        <span class="seach" @click="chadd()" v-else>订单</span>
        <input type="text" v-model="addbm"/>
        <span class="seach" @click="addpronum()">add</span>
        <span class="seach" @click="delpronum()">del</span>
        <div></div> -->
    <!-- <table class="main-list">
            <th class="xuhao">序号</th><th class="shangpin">商品编码</th><th class="shangpin">商品名称</th><th class="kucun" @click="paixun()">库存</th>
            <tr class="pro" v-for="(item,index) in prolist" :key="index">
                <td class="xuhao">{{index+1}}</td>
                <td class="xuhao">{{item.bm}}</td>
                <td class="shangpin">{{item.pn}}</td>
                <td class="kucun">{{item.TotalIn-item.TotalOut}}</td>
            </tr>
        </table> -->
        
    <div v-if="prolist[0]">
      <div style="margin: 5px 0"></div>
      <el-table
        ref="multipleTable"
        :data="prolist"
        border
        highlight-current-row
        height="calc(100vh - 145px)"
        style="min-width: 100%"
        v-loading="isres"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <!-- <el-table-column type="selection" width="30" ></el-table-column> -->
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          v-for="(col, i) in cols"
          :key="i"
          :prop="col"
          :label="col"
          sortable
        ></el-table-column>
      </el-table>
    </div>
    <el-empty description=" " v-else></el-empty>
    <!-- <audio controls="controls" hidden src="music/dingdan.mp3" ref="audio"></audio> -->
  </div>
</template>
<script>
import { chazhengda,chadanpin } from "@/api/echarts";
export default {
  name: "cha",
  data() {
    return {
      list: "",
      list_l: "",
      chalist: [],
      prolist: [],
      pro_list: [],
      isres: false,
      cols: [],
      downloadLoading:false,
    };
  },
  methods: {
    //查单品库存
    async chadanpin() {
        if(!this.list){
            return;
        }
      if (/.*[\u4e00-\u9fa5]+.*$/.test(this.list)) {
        this.list_l = this.list;
        this.isres = true;
        const result = await chadanpin.get({ name: this.list_l, num: "" });
        this.isres = false;
        this.prolist = [];
        // console.log(result);
        this.pro_list = result.data;
        this.pro_list.forEach((item) => {
          if (item.pn != null) {
            this.prolist.push(item);
          }
        });
       
        this.cols = Object.keys(this.prolist[0]);
      } else {
        this.list_l = this.list.replace(/\s+|&nbsp;/gi, "','");
        this.isres = true;
        const result = await chadanpin.post({name:'没有',num:this.list_l});
        this.isres = false;
        this.prolist = [];
        console.log(result);
        this.pro_list = result.data;
        this.pro_list.forEach((item) => {
          if (item.pn != null) {
            this.prolist.push(item);
          }
        });
        
        this.cols = Object.keys(this.prolist[0]);
      }
    },
    exportExcel(tableRef, filename, selection) {
      this.downloadLoading = true;
      // 采用动态导入
      import("@/utils/Export2Excel").then((excel) => {
        excel.export_table_to_excel({ tableRef, filename, selection });
        this.downloadLoading = false;
      });
    },
    /**
     * 导出表格已加载的所有数据
     */
    exportAllData() {
        if(!this.prolist[0]){
            return;
        }
      // this.$refs.multipleTable 对应 <el-table> 组件的属性： ref="multipleTable"
      this.exportExcel(this.prolist, "商品库存");
    },


    //正大
  zhengda () {
  let page=1;
  let pagesize = 20;
  // let jsondata = [];
   const config = {
           headers: {
                      'Accept': '*/*',
                      'Accept-Encoding': 'utf-8',  //这里设置返回的编码方式 设置其他的会是乱码
                      'Accept-Language': 'zh-CN,zh;q=0.8'
                  }
          };
    this.list_l = this.list;
        this.isres = true;
  //let psort = '';
  //''，默认：综合
  //1，价格降序
  //2，价格升序
  //3，销量
  //4，评论数
  //5，新品
  // let jsonpCBKK=(data)=>{
  //   const list=data.data.searchm.Paragraph;
  //   list.forEach((val)=>{
  //     jsondata.push({
        
  //       "图片":"https://img10.360buyimg.com/n7/"+val.Content.imageurl,
  //       "名称":val.Content.warename,
  //       "简介":val.Content.CustomAttrList,
        
  //   "价格":val.dredisprice,
  //   "链接":val.toItemLink
  //   })
      
  //   })
  //   console.log(data.data.searchm.Paragraph.length)
  //   if (page*20 <= data.data.searchm.Paragraph.length) {
  //     page++;
  //     query();
  // } else {
  //     // res.send(jsondata)
  //        this.isres = false;
  //       this.prolist = [];
  //       this.pro_list = result.data;
  //       this.pro_list.forEach((item) => {
  //         if (item.pn != null) {
  //           this.prolist.push(item);
  //         }
  //       });
       
  //       this.cols = Object.keys(this.prolist[0]);
  //     console.log(jsondata)
  // }
  // };
  let query =async () => {

        const result = await chazhengda.get(page, pagesize,config);
        console.log(result);
        // eval(body);   
                 
  };
  query();
}
  },
};
</script>

